import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Select from '@kuiper-components/select';
import Monitor from './Monitor';
import DetectDetail from './DetectDetail';
import s from './style.module.css';
import { FREQ_UNIT_MAP } from '../../../../common/constants';
import CollectFrequency from '../../../components/CollectFrequency';

const { Option } = Select;
export default class Aviliable extends React.PureComponent {
	static propTypes = {
		className: PropTypes.string,
		jobId: PropTypes.string,
		getDropdownRef: PropTypes.func.isRequired,
		httpResult: PropTypes.arrayOf(
			PropTypes.shape({
				result: PropTypes.shape({
					addition: PropTypes.object,
				}),
			})
		),
		httpPrevResult: PropTypes.arrayOf(
			PropTypes.shape({
				result: PropTypes.shape({
					addition: PropTypes.object,
				}),
			})
		),
		pingResult: PropTypes.arrayOf(
			PropTypes.shape({
				result: PropTypes.shape({
					addition: PropTypes.object,
				}),
			})
		),
		pingPrevResult: PropTypes.arrayOf(
			PropTypes.shape({
				result: PropTypes.shape({
					addition: PropTypes.object,
				}),
			})
		),
		httpSettings: PropTypes.arrayOf(
			PropTypes.shape({
				name: PropTypes.string,
				target: PropTypes.string,
				interval: PropTypes.shape({
					num: PropTypes.number,
					unit: PropTypes.string,
				}),
			})
		),
		pingSettings: PropTypes.arrayOf(
			PropTypes.shape({
				name: PropTypes.string,
				target: PropTypes.string,
				interval: PropTypes.shape({
					num: PropTypes.number,
					unit: PropTypes.string,
				}),
			})
		),
	};

	static defaultProps = {
		className: '',
	};

	state = {
		taskType: this.props?.httpSettings?.length > 0 ? 'http' : 'ssl',
		taskIdx: 0,
		name:
			(this.props?.httpSettings?.length > 0
				? (this.props.httpSettings || [])[0]?.name
				: (this.props.pingSettings || [])[0]?.name) || '',
		target:
			(this.props?.httpSettings?.length > 0
				? (this.props.httpSettings || [])[0]?.target
				: (this.props.pingSettings || [])[0]?.target) || '',
	};

	handleSelectChange = val => {
		const selectVal = JSON.parse(val);
		this.setState({
			taskType: selectVal.taskType,
			taskIdx: selectVal.taskIdx,
			name: selectVal.name,
			target: selectVal.target,
		});
	};

	render() {
		const {
			className,
			jobId,
			pingResult,
			httpResult,
			pingPrevResult,
			httpPrevResult,
			httpSettings,
			pingSettings,
			getDropdownRef,
		} = this.props;
		const { taskType, name, target } = this.state;

		const taskOptions = (httpSettings || [])
			.map((item, idx) => ({
				...item,
				taskType: 'http',
				taskIdx: idx,
			}))
			.concat(
				(pingSettings || []).map(
					(item, idx) =>
						({
							...item,
							taskType: 'ping',
							taskIdx: idx,
						} || [])
				)
			);

		const task = this.props[`${taskType}Result`]?.find(
			item => item.target === target
		);
		const prevTask = this.props[`${taskType}PrevResult`]?.find(
			item => item.target === target
		);

		const settings = this.props[`${taskType}Settings`]?.find(
			item => item.target === target
		);

		return (
			<div className={cn(className, s.aviliable)}>
				<div className={s.selectContainer}>
					<div className={s.item}>
						<label className={s.field}>任务名称</label>
						<Select
							className={s.select}
							value={name}
							onChange={this.handleSelectChange}
							getPopupContainer={getDropdownRef}
						>
							{taskOptions.map(t => (
								<Option
									key={t.name}
									value={JSON.stringify({
										taskType: t.taskType,
										target: t.target,
										name: t.name,
									})}
								>
									{t.name}
								</Option>
							))}
						</Select>
					</div>
					<div className={s.item}>
						<span className={s.field}>资产地址：</span>
						<span className={s.value}>{target}</span>
					</div>
					<div className={s.item}>
						<span className={s.field}>监测类型：</span>
						<span className={s.value}>{taskType.toUpperCase()}</span>
					</div>
					<div className={s.item}>
						<span className={s.field}>监测频率：</span>
						<span className={s.value}>
							<CollectFrequency
								viewmode
								value={settings?.interval}
								unitMap={FREQ_UNIT_MAP}
							/>
						</span>
					</div>
				</div>
				<Monitor
					className={s.monitor}
					key={`${taskType}${target}`}
					jobId={jobId}
					taskType={taskType}
					target={target}
				/>
				<DetectDetail
					className={s.detail}
					task={task}
					pingResult={pingResult || []}
					httpResult={httpResult || []}
					pingPrevResult={pingPrevResult || []}
					httpPrevResult={httpPrevResult || []}
					prevTask={prevTask}
					taskType={taskType}
				/>
			</div>
		);
	}
}
